<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$("#btn").click(function(){
		var name=$("input[name='username']").val();
		$.ajax({
			type: "GET",
            url: "MyServlet",
            data: {username:name},//username="tom"
            dataType: "json",
            success:function(data){//成功的时候要执行的函数
            	//alert(data.msg);//json对象  response:success
            	//根据key 得到 value
            	var eValue=eval('data.'+'response'); 
                alert(eValue=="success"); 
                if(eValue=="success"){
                	//做自己想做的事情
                	$("#div").text("此用户名可以使用");
                }else{
                	//提示此用户名不可用
                }
            },
            error:function(d,errorThrown){//失败的时候要执行的函数
            	alert("失败");
            alert(d.status);
            alert(d.readyState);
            alert(errorThrown);
            }
			
		});
		
	});	
});
</script>
</head>
<body>
<input type="button" value="点击" id="btn"/>
用户名：<input type="text" name="username"/><div id="div"></div>
</body>
</html>